import mockjs from "mockjs";
import { createStore, produce } from "solid-js/store";
import Table, { Column } from "solidjs-table";

function App() {
  let [columns, setColumns] = createStore<Column[]>([]);
  let mockBase: Record<string, any> = {
    "id|+1": 1,
  };
  for (let i = 0; i < 30; i++) {
    setColumns(
      produce((columns) => {
        columns.push({
          label: "字段" + i,
          prop: "prop" + i,
          width: i % 2 === 1 ? 220 : 50,
          template: ({ row, rowIndex }) => {
            return (
              <div style={{ width: "50px" }}>
                <input
                  class="el-input__inner"
                  v-value={row["prop" + i]}
                  onInput={(e) => {
                    setTableData(rowIndex, "prop" + i, e.target.value);
                  }}
                ></input>
              </div>
            );
          },
        });
      })
    );
    mockBase["prop" + i] = "21";
  }
  setColumns(
    produce((columns) => {
      columns.unshift({
        label: "左侧固定列2",
        fixed: "left",
        template: ({ rowIndex }) => rowIndex + 1,
        prop: "",
      });
      columns.unshift({
        label: "左侧固定列",
        fixed: "left",
        template: ({ rowIndex }) => rowIndex + 1,
        prop: "",
      });
      columns.push({
        label: "右侧固定列",
        fixed: "right",
        template: ({ rowIndex }) => rowIndex + 1,
        prop: "",
      });
      columns.push({
        label: "右侧固定列2",
        fixed: "right",
        template: ({ rowIndex }) => rowIndex + 1,
        prop: "",
      });
      columns.push({
        label: "切换",
        type: "expand",
        prop: "c",
        fixed: "left",
        width: 100,
      });
    })
  );
  let data: { list: any[] } = mockjs.mock({
    "list|100": [mockBase],
  });
  let expand = () => {
    return <div>内容</div>;
  };
  let [tableData, setTableData] = createStore<Record<string, any>[]>(data.list);
  return (
    <div style={{ height: "500px", padding: "0 50px" }}>
      <Table columns={columns} tableData={tableData} expandRow={expand}></Table>
    </div>
  );
}

export default App;
